import React from "react";
import {Badge, Card, Group, Progress, Text} from "@mantine/core";

export interface DevProgressPros {
  name: string;
  progress: number;
  state: "新开发" | "待迁移" | "迁移中";
  color: "blue" | "grape" | "pink";
}

export const DevProgress = ({name, progress, state, color}: DevProgressPros) => {
  return (
    <Card withBorder radius="md" miw={200}>
      <Group justify="space-between" pb="md">
        <Text size="sm" fw={500}>
          {name}
        </Text>
        <Badge variant="light" color={color} size="xs" radius="xs">
          {state}
        </Badge>
      </Group>

      <Progress
        striped={progress == 100 ? false : true}
        animated={progress == 100 ? false : true}
        radius="xs"
        value={progress}
      />
    </Card>
  );
};
